<template>
  <div class="mobile-app-style" v-if="isMobile">
    <Tabbar
      v-model="active"
      @change="tabChange">
      <TabbarItem icon="home-o">首页</TabbarItem>
      <TabbarItem>
        <span>工程展示</span>
        <template #icon="props">
          <Icon class-prefix="iconfont" name="iconzhihuijiaotong" />
        </template>
      </TabbarItem>
      <TabbarItem>
        <span>产品中心</span>
        <template #icon="props">
          <Icon class-prefix="iconfont" name="iconicon-test" />
        </template>
      </TabbarItem>
      <TabbarItem icon="phone-circle-o" @click="toConnectUs">联系我们</TabbarItem>
      <TabbarItem icon="more-o" @click="toMoreMenu">更多</TabbarItem>
    </Tabbar>

    <router-view/>

<!--    <MobileConnectUs :iphoneNumShow="iphoneNumShow" @change="res => {this.iphoneNumShow = res}">-->
    <MobileConnectUs :iphoneNumShow.sync="iphoneNumShow">
    </MobileConnectUs>

    <!--弹框显示更多-->
    <Popup
      round
      position="bottom"
      closeable
      close-icon="close"
      :style="{ height: '30%' }"
      v-model="moreMenuShow">
      <MenuList></MenuList>
    </Popup>
  </div>
  <div
    v-else
    id="app">
    <el-container ref="pageContent">
        <el-header>
          <headerTwo></headerTwo>
        </el-header>

        <el-main>
          <router-view/>
          <footerCon></footerCon>
          <footer class="site-footer">
            <div class="site-footer__bottom">
              <div class="container">
                <div class="site-footer__copy"><a href="http://www.beian.miit.gov.cn">备案号:渝ICP备20004094</a><br>Copyright © 2020
                  渝兴交通</div>
                <!-- /.site-footer__copy -->
              </div><!-- /.container -->
            </div><!-- /.site-footer__bottom -->
          </footer><!-- /.site-footer -->
        </el-main>
    </el-container>
  </div>
</template>

<script>
import headerTwo from '@/components/headers/headerTwo'
import MobileConnectUs from '@/components/mobiles/mobileConnectUs'
import MenuList from '@/components/mobiles/menuList'
import footerCon from '@/components/footer/index.vue'
import isMobile from '@/views/common/utils'

import { Tabbar, TabbarItem, Icon, Popup } from 'vant'

export default {
  name: 'App',
  components: {
    headerTwo,
    footerCon,
    Tabbar,
    TabbarItem,
    Icon,
    Popup,
    MobileConnectUs,
    MenuList
  },
  data () {
    return {
      clientHeight: '',
      clientWidth: '',
      isMobile: isMobile(),
      active: 0,
      nowIndex: 0,
      iphoneNumShow: false,
      moreMenuShow: false
    }
  },
  watch: {
    $route (to) {
      if (to.path === '/mobileIndex') {
        this.active = 0
      }
      if (to.path === '/mobileProject') {
        this.active = 1
      }
      if (to.path === '/mobileProduct') {
        this.active = 2
      }
    }
  },
  mounted () {
    let getIsMobile = isMobile()
    if (!getIsMobile) {
      // 获取浏览器可视区域高度
      this.clientHeight = `${document.documentElement.clientHeight}`
      this.changeFixed(this.clientHeight)

      let _this = this
      window.onresize = function temp () {
        this.clientHeight = `${document.documentElement.clientHeight}`
        _this.changeFixed(this.clientHeight)
        this.clientWidth = `${document.documentElement.clientWidth}`
      }
      // 根据设备不同设置不同的body样式
      let bodyElm = document.getElementsByTagName('body')
      bodyElm.style.margin = 0
      bodyElm.style.width = 1280
    }
  },
  methods: {
    changeFixed (clientHeight) {
      this.$refs.pageContent.$el.style.height = clientHeight + 'px'
    },

    //=========================移动端方法=================================
    /**
     * 移动端切换菜单事件
     * @param index 选中的位置
     */
    tabChange (index) {

      // 点击首页
      if (index === 0) {
        this.nowIndex = index
        // 跳转到首页
        this.$router.push('/mobileIndex')
      }
      // 点击工程展示
      if (index === 1) {
        this.nowIndex = index
        this.$router.push('/mobileProject')
      }
      // 展示产品
      if (index === 2) {
        this.nowIndex = index
        this.$router.push('/mobileProduct')
      }
      // 联系我们
      if (index === 3) {
        this.iphoneNumShow = true
        this.active = this.nowIndex
      }
      // 更多
      if (index === 4) {
        this.moreMenuShow = true
        this.active = this.nowIndex
      }
    },
    toConnectUs () {
      this.iphoneNumShow = true
    },
    toMoreMenu () {
      this.moreMenuShow = true
    }
  }
}
</script>

<style lang="scss">
.el-header {
  padding: 0 !important;
  min-width: 1280px;
}
.el-main{
  padding: 0 !important;
  margin-top: 15px;
  min-width: 1280px;
}
#app {
  .site-footer {
    text-align: center;
    color: #ffffff;
    background-color: #1e2432;
    height: 50px;
    line-height: 25px;

    a {
      color: #ff5860;
    }
  }
}

.mobile-app-style{
  padding-bottom: 55px;

  .van-tabbar {
    z-index: 100;
    background-color: #f08562;

    .van-tabbar-item{
      color: #ffffff;
    }
    .van-tabbar-item--active {
      color: #1482f0;
    }
  }
}
</style>
